<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640,user-scalable=no">
    <title>JSV</title>
    <script src="../main/index.js"></script>
</head>
<body>
<template>
    <div style="background: teal" class="expression">
        <h1>title</h1>
        <ul>
            ssss
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        template
        <pp>POOIFIFI</pp>
    </div>
</template>
<style>
    .expression {
        background: teal;
    }
</style>
<script>
    let jsv = {
        el: [
            {
                tags: "div",
                attr: {"class": "expression"},
                child: [
                    {tags: "h1", attr: {"@click": " $.JJ = 'gg';$.aaa($.JJ)"}, child: [{text: "title"}]},
                    {
                        tags: "ul", attr: {}, child: [
                            {text: "ssss"},
                            {tags: "li", attr: {}, child: [{text: "1"}]},
                            {tags: "li", attr: {}, child: [{text: "2"}]},
                            {tags: "li", attr: {}, child: [{text: "3"}]},
                            {tags: "li", attr: {}, child: [{text: "4"}]}
                        ]
                    },
                    {text: "template"},
                    {tags: "pp", attr: {}, child: [{text: "POOIFIFI"}]}
                ]
            },
        ],
        css: "/css/index.css",
        // less: "/css/index.less",
        // sass: "/css/index.sass",
        js: {
            data: {
                JJ:"GG"
            },
            methods: {
                aaa(val) {
                    console.info(val, this);
                }
            },
            watch: {},
            computed: {},
            beforeMount() {
            },
            mounted() {
                console.info("mounted",this);
            },
            beforeDestroy() {
            },
            destroyed() {
            },
            beforeCreate() {
            },
            created() {
                console.info("created",this);
            },
            beforeFocus() {
            },
            focused() {
            }
        }
    };
    let a = new JSV(jsv);
    console.info(a.JJ);

    // function AAA() {
    //     this.prototype.a="GGGGGGg";
    // }
    // let a = new AAA();
    // console.info(a.a);

    // function aaa() {
    //     console.info("aaa", this);
    // }
    //
    // function render(el, obj) {
    //     if (obj.text) {
    //         el.append(obj.text);
    //     } else {
    //         let nel = document.createElement(obj.tags);
    //         renderAttr(nel, obj.attr);
    //         renderChild(nel, obj.child);
    //         el.append(nel);
    //     }
    // }
    //
    // function renderAttr(el, attr) {
    //     if (attr) {
    //         for (let a of Object.keys(attr)) {
    //             if (a.substring(0, 1) === "@") {
    //                 el['on' + a.substring(1)] = () => {
    //                     jsv.js.eval(attr[a]);
    //                 };
    //                 continue;
    //             }
    //             el.setAttribute(a, attr[a]);
    //         }
    //     }
    // }
    //
    // function renderChild(el, child) {
    //     if (child) {
    //         for (let c of child) {
    //             render(el, c);
    //         }
    //     }
    // }
    //
    // for (let el of jsv.el) {
    //     render(document.body, el);
    //     console.info(el);
    // }

</script>
</body>
</html>
